<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="loading.js"></script>
		
	<style type="text/css" >
		#loadScreen {
			background:#000;
			position: absolute;
			width:100%;
			color:#fff;
		}
	</style>
</head>
<body>
	<script>
	var loadScreen = document.createElement("div");
	loadScreen.id = "loadScreen";
	//loadScreen.style.width = (document.body.scrollWidth) + "px";
	loadScreen.style.height = (document.body.scrollHeight) + "px";
	document.body.appendChild(loadScreen);
	var $ = function(tag) {
		if (tag.indexOf("#") === 0) {
			return dom = document.getElementById(tag.slice(1));
		} else if (tag.indexOf("_") === 0) {
			return dom = document.createTextNode(tag.slice(1));
		} else {
			return dom = document.createElement(tag);
		}
	};

	function loading() {
		var step = ["bootstrap", "hard", "memory", "file", "index", "ui"],
			i = 0;
		var loadIner = 0,
			interval = 0;
		var interval = setInterval(function() {


			if (i == step.length) {
				clearInterval(interval);
				clearInterval(loadIner);
				$("#loadScreen").appendChild($("p").appendChild($("_#root@*** loading success")));
				setTimeout(function() {
					document.body.removeChild($("#loadScreen"));
				}, 1000);
			} else {
				var currInfo = $("div");
				currInfo.appendChild($("_#root@*** loading " + step[i++]));
				currInfo.appendChild($("span"));
				$("#loadScreen").appendChild(currInfo);
				lastNode = $("#loadScreen").lastChild.lastChild;
				clearInterval(loadIner);
				var j = 0;
				var html = " ";
				loadIner = setInterval(function() {
					if (j++ == 5) {
						j = 0;
						html = " ";
					}
					html += ".";
					lastNode.innerHTML = html;
				}, 100);
			}



		}, 2300);

	}
	loading();
</script>
	<script src="carousel.js"></script>
	<script></script>
</body>
</html>